<template>
  <div>
    <n-bar></n-bar>
    <div class="divv">

   
    <div class="more">
      <div class="more1">
        <ul>
          <li>
            <span><img class="image" :src="str.avatarurl" alt="" /></span>
          </li>
          <li>
            <h3>用户名:{{ str.nickname }}</h3>
            <p>手机号:{{ str.phone }}</p>
          </li>
          <li>
            <van-cell title="分享" @click="showShare = true" />
            <van-share-sheet
              v-model="showShare"
              title="立即分享给好友"
              :options="options"
              @select="onSelect"
            />
          </li>
        </ul>
      </div>
      <div class="more2">
        <ul>
          <li>
            <p>12</p>
            <p>我的收藏</p>
          </li>
          <li>
            <p>12</p>
            <p>浏览记录</p>
          </li>
          <li>
            <p>￥0</p>
            <p>我的红包</p>
          </li>
          <li>
            <p>12</p>
            <p>优惠券</p>
          </li>
        </ul>
      </div>
      <div class="more3_m">
        <div class="more3_mo">
          <ul class="more3_mo1">
            <li>
              <p>我的订单</p>
            </li>
            <li>
              <p>全部订单></p>
            </li>
          </ul>
          <ul class="more3_mo2">
            <van-grid :border="false" :gutter="2" :column-num="5">
              <van-grid-item v-for="item in gridlist" :key="item.id">
                <van-image :src="item.img" />
                <p class="grid-title">{{ item.title }}</p>
              </van-grid-item>
            </van-grid>
          </ul>
        </div>
      </div>
      <div>
        <ul class="mine_mo">
          <li class="lis">
            <span>地址管理</span>
            <span class="fr">></span>
          </li>
          <li class="lis">
            <span>我的钱包</span>

            <i class="fr">
              <span>剩余200U币</span>
              <span>></span>
            </i>
          </li>
          <li class="lis">
            <span>我的二维码</span>
            <span class="fr">></span>
          </li>
          <li class="lis">
            <span>我的伙伴</span>
            <span class="fr">></span>
          </li>
          <li class="lis">
            <span>0元试用</span>
            <span class="fr">></span>
          </li>
        </ul>
      </div>
    </div>
     </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: [],
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      gridlist: [
        {
          id: 1,
          img: require("../assets/img/1.png"),
          title: "待付款",
        },
        {
          id: 2,
          img: require("../assets/img/2.png"),
          title: "代发货",
        },
        {
          id: 3,
          img: require("../assets/img/3.png"),
          title: "评价",
        },
        {
          id: 4,
          img: require("../assets/img/4.png"),
          title: "售后",
        },
      ],
    };
  },
  methods: {},
  mounted() {
    if (sessionStorage.getItem("userinfo")) {
      let str = JSON.parse(sessionStorage.getItem("userinfo"));
      this.str = str;
      console.log(str);
    } else {
      this.$router.push("/login");
    }
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
};
</script>

<style lang='less' scoped>
.divv{
    background-color: aliceblue;
}
.mine_mo {
    height: 40vh;
    line-height:0.6rem;
  display: flex;
  flex-direction: column;
  background-color: white;
  position: relative;
  bottom: 0.5rem;
}
.more3_mo {
  width: 90%;
  height: 15vh;
  background-color: white;
  box-shadow: 0 0.05rem 0.1rem 0 rgb(255 149 128 / 10%);
  position: relative;
  top: -0.9rem;
  left: 0.2rem;
}
.more1 {
  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: tomato;
  }
}
.more3_mo2 {
  margin-left: 0.3rem;
}
.image {
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 50%;
}
.more2 {
  ul {
    height: 0.6rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: tomato;
    padding-bottom: 1rem;
  }
}
.more3_mo1 {
  width: 80%;
  display: flex;
  justify-content: space-between;
  font-size: 0.18rem;
  margin: auto;
}
</style>
